<template>
    <div ref="main" :class="className" :style="{height:height,width:width}"></div>
</template>
<script>
import * as echarts from 'echarts';
//引入主题  npm安装
require('echarts/theme/macarons')
//自适应窗口大小
import resize from './mixins/resize'
export default {
    mixins:[resize],
     props:{
        className:{
            type:String,
            default:'chart'
        },
        width:{
            type:String,
            default:'100%'
        },
        height:{
            type:String,
            default:'400px'
        },
        xAxisData:{//顶部图例
            type:Array,
            default:()=>['2022-02','2022-03','2022-04','2022-06','2022-07']
        },
        seriesData:{
            type:Array,
            default:()=>[   //饼状图分配的数据
                10, 52, 200, 334, 390, 330, 220
            ]
        }
    },
    data(){
        return{
            chart:null,
        }
    },
    mounted() {
        this.$nextTick(()=>{
            this.initChart()
        })
    },
    //组件销毁之前调用
    beforeDestroy() {
        //如果为空
        if(!this.chart){
            return
        }
        //如果不是空  将其置为null
        this.chart.dispose()
        this.chart=null
    },
    methods: {
        //初始化echarts   关于图标的初始化配置
        initChart(){
            //注意是$refs
            this.chart=echarts.init(this.$refs.main,'macarons')
            this.chart.setOption({
                    // color: ['#3398DB'],  指明柱子的颜色  或者使用主题颜色
                    title:{
                        text:'近六个月发布的文章数',
                        left:'center'
                    },
                    tooltip: {
                        trigger: 'axis',
                        //鼠标放上去显示的效果
                        axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                            type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                        }
                    },
                    //柱状图整体位置
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                        containLabel: true//是否包含刻度抽的标签
                    },
                    xAxis: [//x抽
                        {
                            type: 'category',
                            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
                            axisTick: {
                                alignWithLabel: true  //保证刻度抽和标签必须对齐
                            }
                        }
                    ],
                    yAxis: [
                        {
                            type: 'value'
                        }
                    ],
                    series: [
                        {
                            name: '发布数',
                            type: 'bar',//类型是柱状图
                            barWidth: '60%', //每个柱子占据的宽度
                            data:this.seriesData
                        }
                    ]
                })
                        }
                    }
    
}
</script>